<style >

  .content {
    overflow-y: scroll;
    height: 100vh;
    padding-bottom: 50px;
  }

  .richtext {
    font-size: 0.4rem;
    text-align: left;
  }
  .van-tabbar-item__icon {
    margin-bottom: -2px;
  }
  .icon_tab{
    width: 26px;
    height: 26px!important;
  }
</style>
<style scoped>
  .ad-banner {
    width: 80vw;
    background-color: #fff;
  }
  .ad-banner-img {
    width: 100%;
  }
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    z-index: 1000;
  }
</style>
<template>
  <div class="layout">
    <div class="content" :style="{background: mainData==null?'#fafafa':mainData.page.background_color}">
      <MyAudio v-if="mainData!=null&&mainData.page.background_music!=null&&mainData.page.background_music.length>0" :showCtrl="true" :url="GLOBAL.getUrl(mainData.page.background_music[0])"></MyAudio>
      <router-view v-if="mainData!=null" />
    </div>
    <van-tabbar v-model="active" @change="menuSelect" active-color="#E82E39">
      <van-tabbar-item icon="home-o">
        首页
        <template #icon="props">
          <img class="icon_tab" :src="'http://rongyanstatic.oss-cn-shenzhen.aliyuncs.com/imgs/wap/icon_home_'+(props.active?'active.png':'normal.png')"/>
        </template>
      </van-tabbar-item>
      <van-tabbar-item icon="search">
        排名
        <template #icon="props">
          <img class="icon_tab" :src="'http://rongyanstatic.oss-cn-shenzhen.aliyuncs.com/imgs/wap/icon_rank_'+(props.active?'active.png':'normal.png')"/>
        </template>
      </van-tabbar-item>
      <van-tabbar-item icon="friends-o">
        奖品
        <template #icon="props">
          <img class="icon_tab" :src="'http://rongyanstatic.oss-cn-shenzhen.aliyuncs.com/imgs/wap/icon_rule_'+(props.active?'active.png':'normal.png')"/>
        </template>
      </van-tabbar-item>
    </van-tabbar>
    <van-overlay :show="showAd" @click="showAd = false">
      <div v-if="showAd" class="wrapper">
        <div class="ad-banner" @click="toAction">
          <img class="ad-banner-img" :src="GLOBAL.getUrl(mainData.ad_img[0])">
        </div>
      </div>
    </van-overlay>
  </div>
</template>
<script>
  import MyAudio from '@/components/myaudio'
  import { getActive } from '@/api/active'
  import { getActiveId,getSharePath,isNull } from '@/libs/util'

  export default {
    name: 'index',
    components: {
      MyAudio
    },
    data () {
      return {
        currentPath: '',
        active: 0,
        mainData: null,
        showAd:false
      }
    },
    created () {
      let id = getActiveId();//如果有id的话会存起来;
      if (id != undefined && id != null) {
        sessionStorage.setItem('active_id', id)
      }else {
        id = sessionStorage.getItem('active_id')
      }
      this.id = id;
      this.getData()
      this.currentPath = this.$route.name
      this.active = this.getRouteIndex(this.currentPath)
    },
    watch: {
      // 监听相同路由下参数变化的时候，从而实现异步刷新
      '$route' (to, from) {
        // 做一些路由变化的响应
        this.active = this.getRouteIndex(to.name)
      }
    },
    methods: {
      toAction(){
        let type = this.mainData.ad_type;
        if(type===this.GLOBAL.adConst.ACTION_LINK){
          window.location.href = this.mainData.ad_content;
        }else if(type===this.GLOBAL.adConst.ACTION_TO_RANK){
          this.$router.push({name:'rank'});
        }
        this.showAd=false;
      },
      getData () {
        let vm = this
        getActive(this.id).then(rep => {
          if(rep.data.data.active_status ===vm.GLOBAL.activeConst.STATUS_END){
            if(rep.data.data.show_result_page===vm.GLOBAL.commonConst.YES){
              vm.mainData = rep.data.data
              vm.GLOBAL.setMainData( vm.mainData)
              vm.$router.push({name:'result'});
            }else {
              vant.Dialog.alert({
                message: '活动已结束',
              }).then(() => {

              });
            }
            return;
          }else if(rep.data.data.status===vm.GLOBAL.activeConst.STOP){
            vant.Dialog.alert({
              message: '活动已关闭',
            }).then(() => {
            });
            return;
          }
          vm.mainData = rep.data.data
          // this.$wx.wxJssdkInit();
          // this.initShare();
          vm.GLOBAL.setMainData( vm.mainData)
          document.title = vm.mainData.title;
          if(vm.GLOBAL.commonConst.YES===vm.mainData.show_ad){
            if(sessionStorage.getItem('show_ad_'+vm.mainData.id)==='1'){
              return;
            }
            this.showAd = true;
            sessionStorage.setItem('show_ad_'+vm.mainData.id,'1');
          }
        })
      },
	    // initShare(){
      //   let img = this.GLOBAL.getUrl(this.mainData.share_img !== null && this.mainData.share_img.length > 0 ? this.mainData.share_img[0] : this.mainData.content.banners[0].img, true)
      //   let shareObj = {
      //     title: this.mainData.title,
      //     link: getSharePath(),
      //     imgUrl: img,
      //     desc: this.getShareDesc()
      //   };
      //   this.$wx.wxShare(shareObj);
	    // },
      getShareDesc(){
        let defaultDesc= '我正在参加[activity_title]快来为我加油吧！';
        if(!isNull(this.mainData.share_desc)){
          defaultDesc = this.mainData.share_desc;
        }
        return defaultDesc.replace('[activity_title]',this.mainData.title);
      },
      getRouteIndex (name) {
        let index = 0
        switch (name) {
          case 'home':
            index = 0
            this.$router.push({ name: 'home' })
            break
          case 'rank':
            index = 1
            this.$router.push({ name: 'rank' })
            break
          case 'prizes':
            index = 2
            this.$router.push({ name: 'prizes' })
            break
          default:
            index = 0
            this.$router.push({ name: 'home' })
            break
        }
        return index
      },
      menuSelect (menu) {
        switch (menu) {
          case 0:
            this.currentPath = 'home'
            this.$router.push({ name: 'home' })
            break
          case 1:
            this.currentPath = 'rank'
            this.$router.push({ name: 'rank' })
            break
          case 2:
            this.currentPath = 'prizes'
            this.$router.push({ name: 'prizes' })
            break
        }
      }
    }
  }
</script>
